<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>采购计划</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <!--说明：因为部署到线上服务器后，线上服务器是1M带宽的小水管，要花费好几秒时间加载这些静态文件，所以注释掉采用使用CDN的方式-->
  <!--<link href="../static/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">-->
  <!--<link href="../static/bootstrap-datetimepicker-4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet">-->
  <!--<link href="../static/bootstrap-table-1.11.1/css/bootstrap-table.min.css" rel="stylesheet">-->
  <!--<script src="../static/js/jquery-1.12.4.js"></script>-->
  <!--<script src="../static/bootstrap-3.3.7-dist/js/bootstrap.js"></script>-->
  <!--<script src="../static/bootstrap-datetimepicker-4.17.47/moment-with-locales.js"></script>-->
  <!--<script src="../static/bootstrap-datetimepicker-4.17.47/js/bootstrap-datetimepicker.js"></script>-->
  <!--<script src="../static/bootstrap-table-1.11.1/js/bootstrap-table.min.js"></script>-->
  <!--<script src="../static/bootstrap-table-1.11.1/js/bootstrap-table-zh-CN.min.js"></script>-->

  <!--bootstrap.css-->
  <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
  <link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">

  <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://cdn.bootcss.com/moment.js/2.24.0/moment-with-locales.min.js"></script>
  <script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
  <script src="../static/bootstrap-table-1.11.1/js/bootstrap-table.min.js"></script>
  <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>
  <script src="../static/js/getData.js"></script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">采购计划</a>
    </div>
    <div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">iOS</a></li>
        <li><a href="#">SVN</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            Java
            <b class="caret"></b>
          </a>
          <ul class="dropdown-menu">
            <li><a href="#">jmeter</a></li>
            <li><a href="#">EJB</a></li>
            <li><a href="#">Jasper Report</a></li>
            <li class="divider"></li>
            <li><a href="#">分离的链接</a></li>
            <li class="divider"></li>
            <li><a href="#">另一个分离的链接</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>
<div style="max-width: 1200px;margin: 0 auto;display: block;">
  <form class="" role="form">
    <div>
      <table id="add-table" class="table table-responsive table-hover table-striped table-bordered">
        <tbody>
        <tr>
          <td colspan="6">
            <div class="input-group">
              <span class="input-group-addon">采购计划</span>
              <input type="text" id="planTitle" class="form-control" placeholder="采购计划" value="采购计划1">
            </div>
          </td>
        </tr>
        <tr>
          <td colspan="6">
            <div class="input-group">
              <span class="input-group-addon">采购时间</span>
              <input type="text" id="buyTime" class="form-control" placeholder="采购时间" value="2019-05-21">
            </div>
          </td>
        </tr>
        <tr>
          <td colspan="6">
            <div class="input-group">
              <span class="input-group-addon">备注信息</span>
              <input type="text" id="remark" class="form-control" placeholder="输入备注信息" value="备注1">
            </div>
          </td>
        </tr>
        <tr class="goods">
          <td>
            <div class="input-group">
              <span class="input-group-addon">物品名称</span>
              <input type="text" name="goodsName" class="form-control" value="物品名称1">
            </div>
          </td>
          <td>
            <div class="input-group">
              <span class="input-group-addon">预计价格</span>
              <input type="text" name="price" class="form-control" value="99.9">
            </div>
          </td>
          <td>
            <div class="input-group">
              <span class="input-group-addon">购入数量</span>
              <input type="text" name="count" class="form-control" value="1">
            </div>
          </td>
          <td>
            <div class="input-group">
              <span class="input-group-addon">供应商</span>
              <input type="text" name="providerId" class="form-control" value="qwer1">
            </div>
          </td>
          <td>
            <div class="input-group">
              <a href="javascript:;" class="delete-tr">
                <span class="glyphicon glyphicon-trash" style="color: orangered;font-size: 30px;"></span>
              </a>
            </div>
          </td>

        </tr>
        <tr id="add-more-tr">
          <td colspan="6">
            <button type="button" class="btn btn-default" id="add-more" style="color: #337ab7;font-size: 20px;">
              <span class="glyphicon glyphicon-plus"></span>
              添加更多
            </button>
          </td>
        </tr>
        <tr>
          <td colspan="6" style="text-align: center">
            <button type="button" class="btn btn-primary" id="form-submit"
                    style="font-weight:bold;font-size: 16px; width: 200px;" onclick="formSave();">
              <span class="glyphicon glyphicon-ok"></span>
              提 交
            </button>
            <!--<div class="input-group">-->
            <!--<input type="submit" class="btn btn-info glyphicon glyphicon-ok" value="提 交" style="color: #fff;font-weight:bold;font-size: 16px;"/>-->
            <!--</div>-->
          </td>
        </tr>
        </tbody>
      </table>

    </div>
  </form>
</div>
<div style="max-width: 1200px;margin: 0 auto;display: block;">
  <table id="query-table" class="table-bordered">
  </table>
</div>
</body>
<script type="text/javascript">
  $(function () {
    $('#buyTime').datetimepicker({
      format: 'YYYY-MM-DD HH:mm',
      locale: moment.locale('zh-cn')
    });

    $("#add-more").click(function () {
      //ES6语法，省去拼字符串的麻烦
      var htmlStr = `<tr class="goods">
                      <td>
                        <div class="input-group">
                          <span class="input-group-addon">物品名称</span>
                          <input type="text" name="goodsName" class="form-control" value="物品名称2">
                        </div>
                      </td>
                      <td>
                        <div class="input-group">
                          <span class="input-group-addon">预计价格</span>
                          <input type="text" name="price" class="form-control"  value="99.9">
                        </div>
                      </td>
                      <td>
                        <div class="input-group">
                          <span class="input-group-addon">购入数量</span>
                          <input type="text" name="count" class="form-control" value="2">
                        </div>
                      </td>
                      <td>
                        <div class="input-group">
                          <span class="input-group-addon">供应商</span>
                          <input type="text" name="providerId" class="form-control" value="qwer2">
                        </div>
                      </td>
                      <td>
                        <div class="input-group">
                          <a href="javascript:;" class="delete-tr">
                            <span class="glyphicon glyphicon-trash" style="color: orangered;font-size: 30px;"></span>
                          </a>
                        </div>
                      </td>
                    </tr>`;
      $("#add-table #add-more-tr").before(htmlStr);

    });

    $("#add-table").on("click", ".delete-tr", function () {
      $(this).parents("tr").remove();
    });

  });

  function formSave() {
    var plan = {
      planTitle: $("#planTitle").val(),
      buyTime: $("#buyTime").val(),
      remark: $("#remark").val()
    };

    var goodsList = new Array();
    $("#add-table .goods").each(function (index, obj) {
      // console.log(obj);

      var goods = {
        goodsName: $(this).find("[name='goodsName']").val(),
        price: $(this).find("[name='price']").val(),
        count: $(this).find("[name='count']").val(),
        providerId: $(this).find("[name='providerId']").val()
        // goodsName: $("[name='goodsName']").val(),
        // price: $("[name='price']").val(),
        // count: $("[name='count']").val(),
        // providerId: $("[name='providerId']").val()
      }
      goodsList.push(goods);
    });
    console.log(goodsList);

    var param = {
      plan: plan,
      goodsList: goodsList
    }

    // console.log(param);
    $.ajax({
      url: "/plan/addOrEditPlan",
      type: "get",
      dataType: "json",
      traditional: false,
      data: {goodsList: goodsList},
      success: callback,
      error: error
    });

    function callback(data) {
      alert(data);
    }

    function error(data) {
      console.log(data.responseText);
    }


  }
</script>
</html>














